<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>LESS</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet/less" href="styles/world.less" type="text/css">
    <script src="scripts/less.js" type="text/javascript"></script>
</head>
<body>

    <div class="links">
        <p>LESS : Leaner Style Sheets </p>
        <a href="https://lesscss.org">LESS ( 英文官网 )</a>
        &nbsp;|&nbsp;
        <a href="https://less.bootcss.com">LESS ( Bootcss )</a>
    </div>

    <div class="wrapper">
        <button>点我试试</button>
    </div>

    <script type="text/javascript">
        (()=>{

            const traversal = node => {
                let type = node.nodeType ; // 节点类型
                let name = node.nodeName ; // 节点名称
                if( type == Node.ELEMENT_NODE ) {
                    let classNames = node.getAttribute( 'class' ) ; // 获取 class 属性取值
                    let style = getComputedStyle(node) ;
                    let width = style?.width; 
                    console.log( name , ' class: ' , classNames , ' width: ' , width );
                }

                let childs = node.childNodes;
                if( childs && childs.length > 0 ) {
                    Array.from(childs).forEach( n => {
                        // 判断 n 是否是 元素节点( element node )
                        if( n.nodeType === Node.ELEMENT_NODE ) {
                            traversal( n );
                        }
                    });
                }
                
            }

            const btn = document.querySelector( 'button' );
            btn.addEventListener('click', evt => {
                let node = document;
                traversal( node );
            } , false );
        })();
    </script>
    
    
</body>
</html>